<!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <title>天津职业技术师范大学-学校简介</title>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
             font-family: "微软雅黑", sans-serif;
             color: #333;
         }
         /* 顶部紫色导航（带竖线分隔） */
         .top-nav {
             background-color: #732C7B;
             color: #fff;
             padding: 6px 20px;
             font-size: 12px;
             width: 100%;
         }
         .top-nav a {
             color: #fff;
             text-decoration: none;
             margin: 0 8px;
             position: relative;
         }
         .top-nav a:not(:first-child)::before {
             content: "|";
             position: absolute;
             left: -8px;
             color: #fff;
         }
         .top-nav .right-nav {
             float: right;
         }
         /* 头部区域（校徽+校名+主导航） */
         .header {
             display: flex;
             align-items: center;
             padding: 10px 20px;
             border-bottom: 1px solid #eee;
         }
         .header .logo {
             width: 30px;
             height: 30px;
             margin-right: 10px;
         }
         .school-name-wrap {
             margin-right: 20px;
         }
         .school-name {
             font-size: 15px;
             color: #732C7B;
         }
         .school-en {
             font-size: 8px;
             color: #732C7B;
             font-family: "Times New Roman", serif;
         }
         .main-nav {
             font-size: 14px;
         }
         .main-nav a {
             color: #333;
             text-decoration: none;
             margin-left: 20px;
         }
         /* 校园横幅图 */
         .banner {
             width: 100%;
             height: 260px;
             object-fit: cover;
         }
         /* 分段紫色横幅（与校徽对齐+与正文对齐断开） */
         .sub-nav-wrap {
             margin: 10px 0;
             display: flex;
             /* 与校徽左对齐 */
             margin-left: calc(20px + 50px + 10px); 
         }
         .sub-nav-part1 {
             background-color: #732C7B;
             padding: 8px 370px;
             margin-right: 10px;
         }
         .sub-nav-part2 {
             background-color: #732C7B;
             padding: 8px 70px;
         }
         .sub-nav-title {
             color: #fff;
             font-size: 14px;
         }
         .bread-nav {
             color: #fff;
             font-size: 14px;
         }
         .bread-nav a {
             color: #fff;
             text-decoration: none;
         }
         /* 主体内容（正文+侧边栏，增大间距） */
         .content-wrap {
             display: flex;
             max-width: 1200px;
             margin: 0 auto;
             padding: 0 20px;
             gap: 30px; /* 增大正文与侧边栏间距 */
         }
         .content-main {
             flex: 3;
         }
         .content-title {
             font-size: 20px;
             text-align: center;
             margin: 20px 0;
         }
         .content-text {
             line-height: 1.8;
             font-size: 14px;
             text-indent: 2em;
         }
         /* 右侧侧边栏（无框+灰色分隔线） */
         .content-sidebar {
             flex: 1;
             padding: 10px;
         }
         .sidebar-title {
             font-size: 16px;
             font-weight: bold;
             color: #732C7B;
             margin-bottom: 10px;
             /* 与“学校章程”对齐 */
             margin-left: 5px;
         }
         .sidebar-list {
             list-style: none;
         }
         .sidebar-list li {
             margin: 8px 0;
             padding-bottom: 8px;
             border-bottom: 1px solid #eee; /* 不明显灰色横线 */
         }
         .sidebar-list li:last-child {
             border-bottom: none;
         }
         .sidebar-list a {
             color: #333;
             text-decoration: none;
             font-size: 14px;
         }
     </style>
 </head>
 <body>
     <!-- 顶部紫色导航 -->
     <div class="top-nav">
         <a href="#">邮件系统</a>
         <a href="#">校外VPN</a>
         <a href="#">网上办公</a>
         <a href="#">校园地图</a>
         <a href="#">信息公开</a>
         <div class="right-nav">
             <a href="#">办事大厅</a>
             <a href="#">图书资源</a>
             <a href="#">English</a>
             <a href="#">全文检索</a>
             <a href="#">怀念旧报</a>
         </div>
     </div>
     <!-- 头部区域 -->
     <div class="header">
         <img class="logo" src="校徽.jpg" alt="天津职业技术师范大学校徽">
         <div class="school-name-wrap">
             <div class="school-name">天津职业技术师范大学</div>
             <div class="school-en">Tianjin University of Technology and Education</div>
         </div>
         <div class="main-nav">
             <a href="#">首页</a>
             <a href="#">学校概况</a>
             <a href="#">校园新闻</a>
             <a href="#">组织机构</a>
             <a href="#">教育教学</a>
             <a href="#">科学研究</a>
             <a href="#">招生就业</a>
             <a href="#">人才招聘</a>
             <a href="#">合作交流</a>
             <a href="#">校园生活</a>
         </div>
     </div>
     <!-- 校园横幅图 -->
     <img class="banner" src="学校.jpg" alt="天津职业技术师范大学校园">
     <!-- 分段紫色横幅（与校徽对齐+与正文对齐断开） -->
     <div class="sub-nav-wrap">
         <div class="sub-nav-part1">
             <div class="bread-nav">
                 <a href="#">首页></a> &gt; <a href="#">学校概况></a> &gt; <a href="#">学校></a> &gt;
             </div>
         </div>
         <div class="sub-nav-part2">
             <div class="sub-nav-title">学校简介</div>
         </div>
     </div>
     <!-- 主体内容（增大间距+侧边栏灰色线） -->
     <div class="content-wrap">
         <div class="content-main">
             <div class="content-title">中国培养职教师资的摇篮</div>
             <div class="content-text">
                 天津职业技术师范大学是教育部与天津市人民政府共建高校，天津市高水平特色大学建设校。学校的发展始终得到了党和国家领导人的亲切关怀和大力支持。2017年9月8日，国务院总理李克强来校考察，对学校办学特色和办学成效给予充分肯定，希望学校不仅培养高素质“工匠之师”，也要培养大批“中国制造卓越雕塑师”。2018年5月7日，国务院副总理孙春兰来校考察。
             </div>
         </div>
         <div class="content-sidebar">
             <ul class="sidebar-list">
                 <li><a href="#">学校章程</a></li>
                 <li><a href="#">历任领导</a></li>
                 <li><a href="#">现任领导</a></li>
                 <li><a href="#">校徽校训校歌</a></li>
             </ul>
         </div>
     </div>
 </body>
 </html>